import React from 'react';
import {
  Image,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
  View,
} from 'react-native';


export default class Radio extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: props.checked || props.defaultChecked || false,
    };
  }

  componentWillReceiveProps(nextProps) {
    if ('checked' in nextProps) {
      this.setState({
        checked: !!nextProps.checked,
      });
    }
  }

  handleClick = () => {
    if (this.props.disabled) {
      return;
    }
    if (!('checked' in this.props)) {
      this.setState({
        checked: true,
      });
    }
    if (this.props.onChange) {
      this.props.onChange({target: {checked: true}});
    }
  };

  render() {
    const {style, disabled, children} = this.props;

    const checked = this.state.checked;
    let imgSrc = undefined;
    if (checked) {
      console.log('checked', checked);
      imgSrc = disabled
        ? require('./image/checked_disable.png')
        : require('./image/checked.png');

    } else {
      imgSrc = disabled
        ? require('./image/checked.png')
        : require('./image/checked_disable.png');
    }
    return (
      <TouchableWithoutFeedback onPress={this.handleClick}>
        <View style={[styles.wrapper]}>
          <Image
            resizeMode='stretch'
            source={imgSrc} style={[styles.icon, style]}/>
          {typeof children === 'string' ? (
            <Text>{this.props.children}</Text>
          ) : (
            children
          )}
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    width: 15,
    height: 15,
    backgroundColor: 'transparent'
  },

});
